<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, renderList as _renderList } from "./node_modules/vue/dist/vue.esm-browser.js"

        // 默认我们用户写的是模版 -》 render函数 -》 返回的是虚拟dom 
        function render(_ctx, _cache, $props, $setup, $data, $options) {
            return (_openBlock(), _createElementBlock("div", null, [
                _createElementVNode("div", null, [
                    (_openBlock(), _createElementBlock(_Fragment, null, _renderList(3, (item) => {
                        return _createElementVNode("div", null, _toDisplayString(item), 1 /* TEXT */)
                    }), 64 /* STABLE_FRAGMENT */))
                ]),
                _createElementVNode("div", null, _toDisplayString(_ctx.aa), 1 /* TEXT */)
            ]))
        }

        // 不稳定结构不能做靶向更新，所以不能将儿子，放到动态节点中
        console.log(render({ aa: 1000, fruits: [1, 2, 3] }))
        console.log(render({ aa: 1000, fruits: [1, 2, 3, 4] }))

        // block -> dynamicChildren = [Fragment(1, 2, 3),div]
        // block -> dynamicChildren = [Fragment(1, 2, 3,4),div]

    </script>
</body>

</html>